<!--  -->
<template>
    <div class='' style="display:flex">
        欢迎界面
        <div class="content" @drop="drop" @dragover="dragover" @dragenter="dragenter" @dragleave="dragleave">
            <div class="demo" v-for="(item, index) in divs" :key="index" :id="index" draggable @drag="drag"
                @dragstart="dragstart">
                {{item}}
            </div>
        </div>
        <div class="content" @drop="drop" @dragover="dragover" @dragenter="dragenter" @dragleave="dragleave">

        </div>
    </div>
</template>

<script>
/* eslint-disable */ // 忽略该行往下 eslint的错误
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

    export default {
        //import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
            return {
                divs: [
                    'orange', 'apple', 'watermeile'
                ]
            };
        },
        computed: {},
        watch: {},
        methods: {
            drag(e) {

            },
            drop(e) {
                let old = document.getElementById(e.dataTransfer.getData("id"))
                e.target.appendChild(old)
                e.target.style.background = '#fff'
            },
            dragstart(e) {
                e.target.getAttribute('id')
                event.dataTransfer.setData("id", e.target.getAttribute('id'))
            },
            dragover(e) {
                e.preventDefault();
            },
            dragenter(e) {
                e.target.style.background = '#eee'

            },
            dragleave(e) {
                e.target.style.background = ''
            }
        }
    }

</script>
<style scoped>
    .content {
        width: 500px;
        height: 500px;
        border: 1px solid #000;
    }

    .demo {
        width: 100px;
        height: 100px;
        background-color: red;
    }

</style>
